<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [],
    };
  },
  async created() {
    this.searchBill();
  },
  methods: {
    // 添加账单
    async addBill() {
      await axios({
        method: "post",

        url: "https://applet-base-api-t.itheima.net/bill",
        data: {
          name: this.name,
          price: this.price,
          creator: "小二",
        },
      });
      // 重新获取数据
      this.searchBill();
    },
    // 删除账单
    async delBill(id) {
      await axios({
        method: "delete",
        url: `https://applet-base-api-t.itheima.net/bill/${id}`,
      });
      console.log(",id  ----->  ", id);
      // 重新获取数据
      this.searchBill();
    },
    //查询账单
    async searchBill() {
      const res = await axios({
        url: "https://applet-base-api-t.itheima.net/bill",
        params: {
          creator: "小二",
        },
      });
      console.log(res);
      this.list = res.data.data;
    },
  },
  computed: {
    total() {
      return this.list.reduce((pre, item) => {
        return pre + item.price;
      }, 0);
    },
  },
};
</script>

<template>
  <div id="app">
    <div class="contain">
      <!-- 左侧列表 -->
      <div class="list-box">
        <!-- 添加资产 -->
        <form class="my-form">
          <input type="text" class="form-control" placeholder="消费名称" v-model="name" />
          <input type="text" class="form-control" placeholder="消费价格" v-model="price"/>
          <button type="button" class="btn btn-primary" @click="addBill">
            添加账单
          </button>
        </form>

        <table class="table table-hover">
          <thead>
            <tr>
              <th>编号</th>

              <th>消费名称</th>

              <th>消费价格</th>

              <th>操作</th>
            </tr>
          </thead>

          <tbody>
            <tr v-for="item in list" :key="item.id">
              <td>{{ item.id }}</td>

              <td>{{ item.name }}</td>

              <td>{{ item.price }}</td>

              <td><a href="javascript:;" @click="delBill(item.id)">删除</a></td>
            </tr>
          </tbody>

          <tfoot>
            <tr>
              <td colspan="4">消费总计： {{ total }}</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
</template>

<style>
.red {
  color: red !important;
}
.search {
  width: 300px;
  margin: 20px 0;
}
.my-form {
  display: flex;
  margin: 20px 0;
}
.my-form input {
  flex: 1;
  margin-right: 20px;
}
.table > :not(:first-child) {
  border-top: none;
}
.contain {
  display: flex;
  padding: 10px;
}
.list-box {
  flex: 1;
  padding: 0 30px;
}
.list-box a {
  text-decoration: none;
}
.echarts-box {
  width: 600px;
  height: 400px;
  padding: 30px;
  margin: 0 auto;
  border: 1px solid #ccc;
}
tfoot {
  font-weight: bold;
}
@media screen and (max-width: 1000px) {
  .contain {
    flex-wrap: wrap;
  }
  .list-box {
    width: 100%;
  }
  .echarts-box {
    margin-top: 30px;
  }
}
</style>
